@charset 'utf-8'

@import './base'
.shoplist
    padding rem(30) rem(35)
    padding-bottom rem(150)
    box-sizing border-box
    height calc(100vh)
    overflow auto
    .goods-item
        background-color #fffef8
        border-radius rem(10)
        padding rem(35) rem(40)
        box-sizing border-box
        margin-bottom rem(20)
        .goods-img
            position absolute
            top 0
            left 0
            width rem(148)
            height rem(148)
            img 
                display block
                width 100%
        .goods-inner
            position relative
            padding-left rem(208)
            box-sizing border-box
            width 100%
            height rem(148)
            overflow hidden
            .goods-info
                p
                    line-height 1
                .name
                    color #3a3a3a
                    padding-top rem(10)
                    font-size rem(40)
                    margin-bottom rem(50)
                    ellipsis()
                .price
                    color #f6a100
                    font-size rem(38)
        .counter
            position absolute
            right 0
            bottom 0
            width rem(200)
.counter-number
    position relative
    display inline-block
    width rem(200)
    height rem(60)
    .counter-number__decrease, .counter-number__increase
        position absolute
        z-index 1
        top rem(1)
        width rem(60)
        height inherit
        text-align center
        color #f6a100
        cursor pointer
        font-size rem(38)
    .counter-number__decrease
        left rem(1)
        border-radius rem(4) 0 0 rem(4)
        border-right rem(1) solid #dcdfe6
        .icon-minus
            line-height rem(60)
            font-size rem(48)
            display block
            position relative
            overflow hidden
            text-indent -999px
            &:before
                content ''
                border-top rem(2) solid #f6a100
                top 50%
                margin-top rem(-1)
                width rem(30)
                left 50%
                margin-left rem(-15)
                position absolute
    .counter-number__increase
        right rem(1)
        border-radius 0 rem(4) rem(4) 0
        border-left rem(1) solid #dcdfe6
        .icon-plus
            line-height rem(60)
            font-size rem(48)
            display block
            position relative
            overflow hidden
            text-indent -999px
            &:before
                content ''
                border-top rem(2) solid #f6a100
                top 50%
                margin-top rem(-1)
                width rem(30)
                left 50%
                margin-left rem(-15)
                position absolute
            &:after
                content ''
                border-left rem(2) solid #f6a100
                top 50%
                margin-left rem(-1)
                height rem(30)
                left 50%
                margin-top rem(-15)
                position absolute
    .counter-input
        position relative
        font-size rem(38)
        width 100%
        display block
        input
            -webkit-appearance none
            text-align center
            padding-left rem(70)
            padding-right rem(70)
        .counter-input__inner
            background-color #fffef8
            border-radius: rem(4)
            border rem(1) solid #dcdfe6
            box-sizing border-box
            color #606266
            display inline-block
            height rem(60)
            line-height 1
            outline none
            padding rem(0) rem(30)
            transition border-color .2s cubic-bezier(.645,.045,.355,1)
            width 100%
.cart
    max-width rem(750)
    position fixed
    width 100%
    bottom 0
    height rem(150)
    padding-top rem(50)
    box-sizing border-box
    z-index 100
    &:before
        content ''
        position absolute
        width 100%
        height 1px
        bottomLine()
    .cart-img
        position absolute
        top rem(25)
        left rem(35)
        background url('ctx/asset/images/coco/cart.png') 50% 50% no-repeat transparent
        background-size rem(109) rem(109)
        width rem(109)
        height rem(109)
        z-index 10
    .badge
        display inline-block
        text-align center
        background #faca40
        border-radius 50%
        width rem(50)
        height rem(50)
        padding rem(2)
        box-sizing border-box
        float right
        margin-right rem(-20)
        .badge-inner
            line-height rem(46)
            background-color #fff
            border-radius 50%
            width 100%
            height 100%
            color #3a3a3a
            font-size rem(26)
    .cart-info
        background-color #fff
        text-align right
        height inherit
        padding rem(27) rem(268) rem(27) 0
        box-sizing border-box
        span
            color #f6a100
            font-size rem(30)
        span.price
            font-size rem(46)
            line-height rem(46)
    .btn-cart-pay
        text-align center
        background-color #f6a100
        font-size rem(36)
        color #fff
        width rem(240)
        position absolute
        right 0
        bottom 0
        height rem(98)
        line-height rem(98)
    .cart-list
        display none
        position fixed
        bottom rem(100)
        width 100%
        max-width rem(750)
        color #3a3a3a
        .cart-list-header
            padding rem(26) rem(30)
            background #f5f5f5
            font-size rem(34)
            .title
                text-align left
            .clear
                float right
                text-align right
                padding-left rem(46)
                background url('ctx/asset/images/coco/trash.png') 0% 50% no-repeat transparent
                background-size rem(36) rem(38)
        .cart-list-body
            padding 0 rem(30)
            background-color #fff
            font-size rem(30)
            .cart-goods-item:last-child
                background none
                background-size 0
            .cart-goods-item
                padding rem(34) 0
                line-height rem(38)
                bottomLine()
                font-size rem(30)
                position relative
                .goods-item-inner
                    margin-right rem(228)
                .goods-name
                    display inline-block
                    width rem(340)
                    ellipsis()
                .cart-goods-price
                    font-size rem(38)
                    color #f6a100
                    float right
                .cart-goods-counter
                    position absolute
                    right 0
                    top rem(24)